<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 答题记录 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column prop="img" label="用户头像">
                    <template slot-scope="scope">
                        <img
                            src="https://thirdwx.qlogo.cn/mmopen/mrl0HksFn8m60QZiaLfpjMvRBNYtgDWemibJobticPMNy1Kv2HIer20DsMp2OXjUUNCKlKibibpoJicYzle6G1WUnIoUZJ9IOFkECY/132"
                            alt=""
                            class="info-image"
                        />
                    </template>
                </el-table-column> -->
                <el-table-column prop="question" label="题目名称"></el-table-column>
                <el-table-column label="选项内容">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type !== 3">
                            <div v-for="(item, index) in scope.row.options" :key="index">
                                <span>{{ item.option }}：</span>
                                <span>{{ item.description }}</span>
                            </div>
                        </div>
                        <span v-else>对错</span>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="题型">
                    <template slot-scope="scope">
                        {{ scope.row.type == 1 ? '单选题' : scope.row.type == 2 ? '多选题' : '判断题' }}
                    </template>
                </el-table-column>
                <el-table-column prop="answer" label="答案">
                    <template slot-scope="scope">
                        <div class="answer">
                          <div style="color: #00ce74;"><span>正确答案：</span><span>{{ scope.row.true_answer == 0 ? '错误' : scope.row.true_answer == 1 ? '正确' : scope.row.true_answer }}</span></div>
                          <div :style="scope.row.result == 0 ? `color: red` : `color: #00ce74`"><span>用户答案：</span><span>{{ scope.row.answer == 0 ? '错误' : scope.row.answer == 1 ? '正确' : scope.row.answer }}</span></div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <div style="font-size: 30px">
                            <span v-if="scope.row.result == 0" style="color: red;"><i class="el-icon-close"></i></span>
                            <span v-else style="color: #00ce74;"><i class="el-icon-check"></i></span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.rows"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { answerRecordListData } from '../../api/index';
export default {
    // name: 'user_list',
    data() {
        return {
            query: {
                page: 1,
                rows: 4
            },
            tableData: [],
            pageTotal: 0
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            answerRecordListData(this.query).then((res) => {
                this.tableData = res.data.list;
                this.pageTotal = res.data.count;
            });
        },
        // 分页
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}

/* .info-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
} */

</style>
